<template>
    <Modal title="支付密码设置" v-model="setPayPsdShow" :mask-closable="false" width="400" class-name="">
       <Form ref="setpaypsd" :model="setPayPsd" :rules="setpaypsdrule" :label-width="80" label-position="left">
        <FormItem label="密码" prop="setFirstPayPsd">
            <Input type="password" placeholder="6位数字密码" v-model="setPayPsd.setFirstPayPsd"></Input>
        </FormItem>
        <FormItem label="确认密码" prop="confirmSetFirstPayPsd">
            <Input type="password" placeholder="请输入确认密码" v-model="setPayPsd.confirmSetFirstPayPsd"></Input>
        </FormItem>
        </Form>
         <div slot="footer" align="center">
            <Button type="error" @click="setPayPsdOK('setpaypsd')">确定</Button>
            <Button @click="setPayPsdCancle('setpaypsd')">取消</Button>
        </div>
    </Modal>
</template>
<script>
import { jsonToString } from "@/common/js/jsonToString";
import { mapGetters, mapActions } from "vuex";
export default {
  props: {
    setPayPsdShow: {
      type: Boolean,
      default: true
    }
  },
  data() {
    //验证设置密码
    const checkSetPayPsd = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("密码不能为空"));
      } else if (!/^[0-9]{6}$/.test(value)) {
        callback(new Error("支付密码必须为六位数字"));
      } else {
        if (
          this.setPayPsd.confirmSetFirstPayPsd !== this.setPayPsd.setFirstPayPsd
        ) {
          this.$refs.setpaypsd.validateField("confirmSetFirstPayPsd");
        }
        callback();
      }
    };
    const confirmSetPayPsd = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入确认密码"));
      } else if (value !== this.setPayPsd.setFirstPayPsd) {
        callback(new Error("两次密码输入不一致"));
      } else {
        callback();
      }
    };
    return {
      userAccountData: {},
      //设置支付密码
      setPayPsd: {
        setFirstPayPsd: "",
        confirmSetFirstPayPsd: ""
      },
      setpaypsdrule: {
        setFirstPayPsd: [{ validator: checkSetPayPsd, trigger: "blur" }],
        confirmSetFirstPayPsd: [
          { validator: confirmSetPayPsd, trigger: "blur" }
        ]
      }
    };
  },
  computed: {
    ...mapGetters(["accountData"])
  },
  wtcah: {},
  created() {
    this.userAccountData = this.accountData;
    // JSON.parse(JSON.stringify());
  },
  methods: {
    ...mapActions(["SET_ACCOUNT_DATA"]),
    //设置密码ok
    setPayPsdOK(setpaypsd) {
      this.$refs[setpaypsd].validate(valid => {
        if (valid) {
          var params = {
            token: localStorage.getItem("token"),
            psd: this.setPayPsd.setFirstPayPsd,
            psd2: this.setPayPsd.confirmSetFirstPayPsd
          };
          this.$http
            .post(
              this.urlRequest + "?m=api&c=user&a=setPayPSD",
              jsonToString(params)
            )
            .then(res => {
              console.log(res);
              // localStorage.setItem(moma,res);
              if (res.data.status == 0) {
                this.$emit("update:setPayPsdShow", false);
                this.$Message.success("设置支付密码成功！");
                this.userAccountData.is_set_paypassword = "1";
                this.$router.push({path:'/topUpCenter/withdraw/withdraw'})
                // localStorage.setItem(
                //   "accountData",
                //   JSON.stringify(this.userAccountData)
                // );
                // this.SET_ACCOUNT_DATA({
                //   obj: this.userAccountData
                // });
              } else {
                this.$Message.error(res.data.ret_msg);
              }
            });
        }
      });
    },
    setPayPsdCancle(setpaypsd) {
      this.$refs[setpaypsd].resetFields();
      this.$emit("update:setPayPsdShow", false);
    }
  }
};
</script>


// WEBPACK FOOTER //
// src/components/personalCenter/setPayPsdComponent/setPayPsdComponent.vue